<template>
  <div class="app-container home">

    <el-row :gutter="5">
      <div class="content-text" :style="{ fontSize: 24 + 'px' }">
        <p><b>病虫害管理系统</b></p>
      </div>
    </el-row>

    <!-- 修改此处：添加了图片列 -->
    <el-row :gutter="40" class="intro-section">
      <el-col :sm="24" :lg="14">
        <div class="content-text" :style="{ fontSize: 18 + 'px' }">
          <p>作品以若依为框架展开开发与训练。前端借助若依系统框架，搭建适用于农业领域使用的界面平台，在菜单栏实现主要功能的索引，排布既条理清晰，又符合大众审美，提升用户使用效率。</p>
          <p>模型训练的数据集来源于kaggle网站上的病虫害图片及其相关信息，通过后端处理，将数据集与原创模型相关联，实现模型的开发与训练，完成了作品功能的底层实现。</p>
          <p>作品现有功能主要从病虫害识别、AI问答、数据标注、历史记录四大板块进行推进。</p>
        </div>
      </el-col>
    </el-row>

    <el-divider class="content-divider"></el-divider>

    <!-- 功能卡片区域 -->
    <el-row :gutter="20" class="feature-cards">
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-search"></i>
          </div>
          <h3>病虫害识别</h3>
          <p>利用AI模型快速识别农作物病虫害，提供准确的诊断结果和防治建议。</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-chat-line-round"></i>
          </div>
          <h3>AI问答</h3>
          <p>智能问答系统，解答关于病虫害防治的各种问题，提供专业建议。</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-edit"></i>
          </div>
          <h3>数据标注</h3>
          <p>协助用户标注病虫害数据，完善系统识别能力，提高模型准确性。</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-chat-line-round"></i>
          </div>
          <h3>历史记录</h3>
          <p>保存用户的查询和识别历史，方便后续查看与分析，跟踪作物健康状况。</p>
        </div>
      </el-col>
    </el-row>

    <!-- 页脚 -->
    <el-row style="margin-top: 50px;">
      <el-col :span="24">
        <div style="text-align:end; padding: 20px; color: #666;">
          <p>© 2025 病虫害管理系统 - 基于若依框架开发</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<style scoped lang="scss">
.home {
  padding: 20px;
}

.intro-section {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}

.image-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.intro-image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-left: 20px;
}

.intro-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.feature-cards {
  margin-top: 40px;
}

.feature-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 40px;
  color: #67c23a;
  margin-bottom: 15px;
}

.feature-card h3 {
  color: #333;
  margin-bottom: 10px;
  font-size: 18px;
}

.feature-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.content-divider {
  margin: 30px 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .intro-section {
    flex-direction: column;
  }

  .image-col {
    margin-top: 30px;
    margin-left: 0;
  }

  .intro-image {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .feature-card {
    height: auto;
    margin-bottom: 20px;
  }
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

.col-item {
  margin-bottom: 20px;
}

ul {
  padding: 0;
  margin: 0;
}

h4 {
  margin-top: 0px;
}

h2 {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 100;
}

p {
  margin-top: 10px;

  b {
    font-weight: 700;
  }
}

.update-log {
  ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
  }
}
</style>

